forum

home / developersection / forums / how orderby multiple fields in angular?

Ask Question
Revati S Misra

Student

Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Follow
Can you answer this question?
Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

19-Jun-2024

Order By Multiple Fileds

In AngularJS, you can use the orderBy filter to sort objects based on different fields. Here's how you can orderBy multiple fields:

Syntax
The orderBy filter accepts a set of predicate functions or strings, where each predicate can refer to a field and optionally specifies a sort direction (+ for ascending, - for descending).

<div ng-repeat="item in items | orderBy:['field1', 'field2']">
   {{ item.field1 }}, {{ item.field2 }}
</div>

In the example above 

items are the array of objects you want to display.
orderBy:['field1', 'field2'] Specifies that the item order should be sorted first in ascending order by field1, then in ascending order by field2 by default.

Array data

Let's take an array of objects in the controller,

$scope.items = [
   { name: 'John', age: 30, city: 'New York' },
   { name: 'Jane', age: 25, city: 'San Francisco' },
   { name: 'Doe', age: 35, city: 'Seattle' },
   { name: 'Mary', age: 28, city: 'Chicago' },
   { name: 'David', age: 32, city: 'Boston' }
];

And you want to show these factors first in ascending order by city, then in descending order by age. You can use orderBy

<table>
   <tr>
       <th>Name</th>
       <th>Age</th>
       <th>City</th>
   </tr>
   <tr ng-repeat="item in items | orderBy:['city', '-age']">
       <td>{{ item.name }}</td>
       <td>{{ item.age }}</td>
       <td>{{ item.city }}</td>
   </tr>
</table>

In the syntax above-
orderBy:['city', '-age'] First sort the items in ascending order by city ('city'), then in descending order by age ('-age').
the city is arranged in order of ascending order.
-age sorts age in descending order (using - before the field name in descending order).

Example- 

Here's a basic example that demonstrates the multiple orderBy properties in Angular js

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Keypress Event Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- bootstrap cdn link -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- angular js cdn link -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body>
    <div data-ng-controller="MyController" class="container my-4">
        <div class="my-2">
       	  <h3>Order by 'city' in ascending and 'age' in descending</h3>
          <table class="table">
            <thead>
              <tr>
                  <th>Name</th>
                  <th>Age</th>
                  <th>City</th>
              </tr>
            </thead>
            <!-- bind the data using  ng-repead and orders the item by 'city' in asc, then 'age' in desc-->
            <tbody data-ng-repeat="item in items | orderBy:['city', '-age']">
              <tr>
                  <td>{{ item.name }}</td>
                  <td>{{ item.age }}</td>
                  <td>{{ item.city }}</td>
              </tr>
            </tbody>
         </table>
       
        </div>
    </div>

    <script>
        angular.module("myApp", [])
        .controller("MyController", function($scope){
          $scope.items = [
              { name: 'John', age: 30, city: 'New York' },
              { name: 'Jane', age: 25, city: 'San Francisco' },
              { name: 'Doe', age: 35, city: 'Seattle' },
              { name: 'Mary', age: 28, city: 'Chicago' },
              { name: 'David', age: 32, city: 'Boston' }
          ];

        });

    </script>

</body>
</html>

Output- 
How orderBy multiple fields in Angular?
 

Also, Read: How to use a keypress event in AngularJS?

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy